<template>
    <view class="container">
        <uni-forms ref="form" :modelValue="formData" :rules="rules">
            <!-- 会员名称 -->
            <uni-forms-item required label-align="right" label-width="80" label="会员名称" name="name">
                <uni-easyinput type="text" v-model="formData.name" placeholder="请输入会员名称" :inputBorder="false"
                    class="custom-input" />
            </uni-forms-item>

            <!-- 会员颜色 -->
            <uni-forms-item required label-align="right" label-width="80" label="会员颜色" name="color">
                <view class="color-field" @click="openColorPicker">
                    <view class="color-preview" :style="{ backgroundColor: formData.color }"></view>
                    <text class="color-value">{{ formData.color }}</text>
                </view>

                <!-- 独立颜色选择器弹窗 -->
                <uni-popup ref="colorPopup" type="dialog">
                    <view class="color-picker-container">
                        <chrome-picker v-model="color" />
                        <button class="confirm-btn" @click="closeColorPicker">确认颜色</button>
                    </view>
                </uni-popup>
            </uni-forms-item>

            <!-- 会员折扣 -->
            <uni-forms-item required label-align="right" label-width="80" label="会员折扣" name="discount">
                <view class="custom-input-number">
                    <input @blur="handleDiscountInput" class="numeric-input" type="number" :value="formData.discount" 
                        step="0.01" min="0.1" max="1" placeholder="0.10" />
                </view>
            </uni-forms-item>

            <!-- 会员等级 -->
            <uni-forms-item required label-align="right" label-width="80" label="会员等级" name="level">
                <uni-number-box v-model="formData.level" :min="1" :max="10" class="custom-level-box" />
            </uni-forms-item>

            <!-- 会员描述 -->
            <uni-forms-item label-align="right" label-width="80" label="会员描述" name="description">
                <uni-easyinput type="textarea" v-model="formData.description" placeholder="请输入描述" :inputBorder="false"
                    class="custom-textarea" />
            </uni-forms-item>

            <!-- 操作按钮 -->
            <view class="action-buttons">
                <button class="reset-btn" @click="handleReset">重置</button>
                <button class="submit-btn" @click="handleSubmit">提交</button>
            </view>
        </uni-forms>

        <!-- 提示消息 -->
        <uni-popup ref="popup" type="message">
            <uni-popup-message :type="popupType" :message="popupMessage" :duration="2000" />
        </uni-popup>
    </view>
</template>

<script>
    import {
        Chrome
    } from 'vue-color'
    import {
        Add_vip
    } from "@/pages/apis/login.js"

    export default {
        components: {
            'chrome-picker': Chrome
        },
        data() {
            return {
                showColorPicker: false,
                popupType: 'success',
                popupMessage: '',
                formData: {
                    name: '',
                    color: '#FF0000',
                    discount: 1.00,
                    level: 1,
                    description: ''
                },
                rules: {
                    name: {
                        rules: [{
                            required: true,
                            errorMessage: '请输入会员名称'
                        }]
                    },
                    color: {
                        rules: [{
                            required: true,
                            errorMessage: '请选择会员颜色'
                        }]
                    },
                    discount: {
                        rules: [{
                            required: true,
                            errorMessage: '请输入折扣'
                        }, {
                            format: 'number',
                            minimum: 0.1,
                            maximum: 1,
                            errorMessage: '折扣范围0.1-1'
                        }]
                    },
                    level: {
                        rules: [{
                            required: true,
                            errorMessage: '请输入等级'
                        }, {
                            format: 'number',
                            minimum: 1,
                            errorMessage: '等级最小为1'
                        }]
                    }
                }
            }
        },
        computed: {
            color: {
                get() {
                    return {
                        hex: this.formData.color
                    }
                },
                set(val) {
                    this.formData.color = val.hex
                }
            }
        },
        methods: {
            async handleSubmit() {
                try {
                    await this.$refs.form.validate()
                    const res = await Add_vip({
                        ...this.formData,
                        foeverDiscount:parseFloat (this.formData.discount)
                    })

                    if (res.code === 0) {
                        this.showPopup('success', '添加成功')
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 2000)
                    }
                } catch (error) {
                    this.showPopup('error', error.message || '提交失败')
                }
            },

            handleReset() {
                this.$refs.form.resetFields()
                this.showColorPicker = false
            },

            handleDiscountChange(value) {
                this.formData.discount = Number(value.toFixed(2))
            },

            showPopup(type, message) {
                this.popupType = type
                this.popupMessage = message
                this.$refs.popup.open()
            },

            // 打开颜色选择器
            openColorPicker() {
                this.$refs.colorPopup.open()
            },

            // 关闭颜色选择器
            closeColorPicker() {
                this.$refs.colorPopup.close()
            },

            // 处理折扣输入
            handleDiscountInput(e) {
                let value = parseFloat(e.detail.value)
                if (isNaN(value)) value = 1
                if (value<0.01) value=0.01
                if (value>1) value=1
                this.formData.discount = Math.min(Math.max(value, 0.1), 1).toFixed(2)
            }
        }
    }
</script>

<style scoped>
    .container {
        padding: 20px;
    }

    /* 颜色选择相关样式 */
    .color-field {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
    }

    .color-preview {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        margin-right: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .color-picker-container {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
    }

    /* 数字输入框样式优化 */
    .custom-number-box {
        display: flex;
        align-items: center;
    }

    .custom-number-box /deep/ .uni-numbox {
        height: 36px;
        border-radius: 4px;
    }

    .custom-number-box /deep/ .uni-numbox__value {
        color: #333;
        font-size: 14px;
    }

    .percentage {
        margin-left: 8px;
        color: #666;
    }

    /* 自定义数字输入框样式 */
    .custom-input-number {
        position: relative;
        display: flex;
        align-items: center;
    }

    .numeric-input {
        width: 120px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        font-size: 14px;
    }

    .numeric-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .percentage {
        margin-left: 8px;
        color: #666;
    }

    /* 操作按钮样式 */
    .action-buttons {
        display: flex;
        margin-top: 24px;
        gap: 16px;
    }

    .submit-btn {
        flex: 1;
        background-color: #007aff;
        color: white;
        border-radius: 8px;
    }

    .reset-btn {
        flex: 1;
        background-color: #f0f0f0;
        color: #666;
        border-radius: 8px;
    }

    /* 输入框统一样式 */
    .custom-input /deep/ .uni-easyinput__content-input {
        height: 40px;
        padding: 0 12px;
    }

    .custom-textarea /deep/ .uni-easyinput__content-textarea {
        min-height: 80px;
        padding: 12px;
    }
</style>